<template>
    <div class="terms-page">
        <van-nav-bar title="Terms of Service" left-text="Back" left-arrow @click-left="$router.back()" />

        <div class="terms-content">
            <div class="terms-section">
                <p class="last-updated">Last updated: {{ lastUpdated }}</p>

                <h2>Agreement to Terms</h2>
                <p>
                    By accessing and using Social Dojo, you accept and agree to be bound by
                    the terms and provision of this agreement.
                </p>

                <h2>Use License</h2>
                <p>
                    Permission is granted to temporarily use Social Dojo for personal,
                    non-commercial transitory viewing only. This is the grant of a license,
                    not a transfer of title, and under this license you may not:
                </p>
                <ul>
                    <li>Modify or copy the materials</li>
                    <li>Use the materials for commercial purposes</li>
                    <li>Attempt to reverse engineer any software</li>
                    <li>Remove any copyright or proprietary notations</li>
                </ul>

                <h2>User Accounts</h2>
                <p>
                    When you create an account with us, you must provide accurate and
                    complete information. You are responsible for safeguarding your account
                    and all activities that occur under your account.
                </p>

                <h2>Prohibited Uses</h2>
                <p>You may not use our service:</p>
                <ul>
                    <li>For any unlawful purpose</li>
                    <li>To harass, abuse, or harm others</li>
                    <li>To transmit spam or malicious content</li>
                    <li>To violate any applicable laws or regulations</li>
                </ul>

                <h2>Content</h2>
                <p>
                    Our service allows you to post and share content. You retain ownership
                    of content you create, but grant us a license to use, display, and
                    distribute your content within the service.
                </p>

                <h2>Privacy Policy</h2>
                <p>
                    Your privacy is important to us. Please review our Privacy Policy,
                    which also governs your use of the service.
                </p>

                <h2>Termination</h2>
                <p>
                    We may terminate or suspend your account immediately, without prior
                    notice, for conduct that we believe violates these Terms of Service.
                </p>

                <h2>Disclaimer</h2>
                <p>
                    The information on this app is provided on an 'as is' basis. To the
                    fullest extent permitted by law, we exclude all representations,
                    warranties, and conditions relating to our service.
                </p>

                <h2>Limitation of Liability</h2>
                <p>
                    In no event shall Social Dojo be liable for any damages arising out of
                    the use or inability to use the service.
                </p>

                <h2>Changes to Terms</h2>
                <p>
                    We reserve the right to modify these terms at any time. We will notify
                    users of any material changes via the app or email.
                </p>

                <h2>Contact Information</h2>
                <p>
                    If you have any questions about these Terms of Service, please contact us at:
                    <a href="mailto:legal@socialdojo.com">legal@socialdojo.com</a>
                </p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const lastUpdated = computed(() => {
    return new Date().toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
})
</script>

<style lang="scss" scoped>
.terms-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.terms-content {
    padding: 16px;
}

.terms-section {
    background: white;
    border-radius: 16px;
    padding: 24px;

    .last-updated {
        font-size: 14px;
        color: #969799;
        margin-bottom: 24px;
        font-style: italic;
    }

    h2 {
        font-size: 20px;
        font-weight: 600;
        color: #323233;
        margin: 24px 0 16px 0;

        &:first-of-type {
            margin-top: 0;
        }
    }

    p {
        font-size: 16px;
        color: #646566;
        line-height: 1.6;
        margin: 0 0 16px 0;

        a {
            color: #1989fa;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    ul {
        margin: 0 0 16px 0;
        padding-left: 20px;

        li {
            font-size: 16px;
            color: #646566;
            line-height: 1.6;
            margin-bottom: 8px;
        }
    }
}
</style>